
<template>
  <div class="index">
    <div class="content">
      <div class="content-header">
        <div :class="current_tab_index == '0' ? 'header-cell active' : 'header-cell'" @click="change_tab('0')">全部</div>
        <div :class="current_tab_index == '1' ? 'header-cell active' : 'header-cell'" @click="change_tab('1')">大厅</div>
        <div :class="current_tab_index == '2' ? 'header-cell active' : 'header-cell'" @click="change_tab('2')">包厢</div>
      </div>

      <div class="card-list">
        <div :class="item.order_status == 'hall' ? 'card hall' : item.order_status == 'room' ? 'card room' : 'card'" @click="get_order_detail(item.order_id)" v-for="(item, index) in new Array(22).fill({
          addTime: 1744083743252, 
          tableNum: '07', 
          tableType: 'hall', 
          peopleNum: 4,
          orderId: '1001',
          totalPrice: '356',
          order_status: 'hall'
        
        })" :key="index">
          <div class="card-time" style="justify-content: flex-start;">
            <img src="../../public/icon_wait.png" style="width: 15px;height: 15px;margin-right: 3px;" alt="">
            49分
          </div>  

          <div class="card-content">{{ item.tableType == 'hall' ? '大厅' : item.tableType == 'room' ? '包厢' : '' }} {{ item.tableNum }}桌</div>
          <div class="card-bottom">
            <div class="card-bottom-left"><img src="../../public/icon_people.png" style="width: 15px;height: 15px;margin-right: 5px;" alt=""> {{ item.peopleNum }}</div>
            <div class="card-bottom-right">￥{{ item.totalPrice || 0 }}</div>
          </div>
        </div>

        <div class="page-change">
          <div class="prev" @click="page_prev"><img src="../../public/icon_arrow_left.png" style="width: 25px;height: fit-content;" alt=""></div>
          <div class="num"> {{ current_page }} / {{ page_total }}</div>
          <div class="next" @click="page_next"><img src="../../public/icon_arrow_right.png" style="width: 25px;height: fit-content;" alt=""></div>
        </div>
      </div>

      <div class="order-info">
        <div class="info-header">
          <div class="info-header-left">桌台: 07</div>
          <div class="info-header-right">人数: 4人</div>
        </div>

        <div class="info-extra">
          <div class="info-extra-cell">开台人: 系统管理员</div>

          <div class="info-extra-cell">
            <div class="info-extra-item">开台时长: 49分钟</div>
            <div class="info-extra-item">开台时间: 10:21</div>
          </div>

          <div class="info-extra-cell">服务员: --</div>

          <div class="info-extra-cell">备注: </div>

        </div>

        <div class="info-detail-title">
          <div class="info-detail-name">名称</div>
          <div class="info-detail-num">数量</div>
          <div class="info-detail-price">金额</div>
        </div>

        <div class="info-detail-list">
          <div class="info-detail-cell">
            <div class="info-detail-name">牛肚</div>
            <div class="info-detail-num">2</div>
            <div class="info-detail-price">78</div>
          </div>

          <div class="info-detail-cell">
            <div class="info-detail-name">牛肚</div>
            <div class="info-detail-num">2</div>
            <div class="info-detail-price">78</div>
          </div>

          <div class="info-detail-cell">
            <div class="info-detail-name">牛肚</div>
            <div class="info-detail-num">2</div>
            <div class="info-detail-price">78</div>
          </div>
        </div>

        <div class="info-subtotal">
          <div class="info-subtotal-cell">折扣：￥0.00</div>
          <div class="info-subtotal-cell">总计：￥0.00</div>
          <div class="info-subtotal-cell">小计：￥0.00</div>
          <div class="info-subtotal-cell">服务费：￥0.00</div>
        </div>

        <div class="place">
          <el-button type="primary" round style="width: 100%;height: 100%;" @click="place_order">结账</el-button>
        </div>


      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { fetchOrderDetail, fetchOrderList } from "../api/api"
  const tab_name = ref("all");
  const current_order_info = ref({});
  const current_tab_index = ref("0");
  const change_tab = (index) => {
    current_tab_index.value = index
    
  }

  const order_list = reactive([]);

  const current_page = ref(1);  // 当前页数
  const page_total = ref(1);  // 总页数
  const page_count = 30

  /*
    订单字段
    order_id 订单号
    table_no 桌号
    table_type 大厅|包厢
    people_no 人数
    add_time 订单创建时间
    order_status 订单状态 PLACED 已下单  PAYED 已结账
    remark 备注
    total_price 订单总价
    dish_list 菜品列表
        {
          dish_name 菜品名称
          dish_price 菜品价格
          dish_count 菜品数量
          dish_id 菜品id
        }
  */

  // 加载页面请求订单列表
  const queryOrderList = async(page) => {
    let reqData = {
      page: page ? page : current_page.value,
      page_count: 30
    }
    const res = await fetchOrderList(reqData);
    if(res && res.status == 200) {
      order_list = res.data
      let length = res.data.length || 0
      if(length > 0) {
        page_total.value = Math.floor(length/page_count) + 1
      }
       
    } else {
      this.$message.error('加载订单列表失败，请联系管理员');
    }
  }
  // 每十秒轮询查询
  let interval = setInterval(queryOrderList(), 10000)
  

  // 上一页
  const page_prev = () => {
    if(current_page.value <= 1) return
    let page = current_page.value-1;
    queryOrderList(page)
  }

  // 下一页
  const page_next = () => {
    if(current_page.value <= 1) return
    let page = current_page.value+1;
    queryOrderList(page)
  }

  // 查询订单菜品详情
  const get_order_detail = async(id) => {
    if(!id || id == "") this.$message.error('当前无订单id，请联系管理员');

    let reqData = {
      order_id: id
    }

    const res = await fetchOrderDetail(reqData);
    current_order_info.value = res || {}

  }


  const place_order = async() => {
    if(!current_order_info.value || !current_order_info.value.order_id) {
      this.$message.error('当前无订单id，请联系管理员');
      return
    }

    this.$confirm('是否确认结账?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async() => {
          let reqData = {
            order_id: current_order_info.value.order_id
          }
          const res = await submit_place_order(reqData);
          if(res && res.status == 200) {
            this.$message.error(`${current_order_info.value.table_no}桌已结账完成`);

          } else {
            this.$message.error(`${current_order_info.value.table_no}桌结账失败，请重试`);
          }
        }).catch(() => {});

  }

</script>

<style lang="scss">
*{margin:0;padding: 0;}
         /* 滚动条整体样式 */
         ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /* 滚动条轨道 */
        ::-webkit-scrollbar-track {
            background: #26262a;
            border-radius: 2px;
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 2px;
        }

        /* 滚动条滑块悬停时的样式 */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
.index{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .content {
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #1d1c21;
    box-sizing: border-box;

    .content-header {
      width: 100%;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #47464b;
      display: flex;
      align-items: center;
      padding-left: 10px;

      .header-cell{
        width: 50px;
        height: 80%;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        transition: 0.5s;
      }

      .header-cell:hover{ border-bottom: 1px solid #21aaaa; color: #21aaaa;}
      .header-cell.active { border-bottom: 1px solid #21aaaa; color: #21aaaa;}
    }

    .card-list {
      width: calc(100% - 320px);
      height: calc(100vh - 60px);
      position: relative;
      padding: 25px 15px 50px;
      box-sizing: border-box;
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, 250px);
      grid-template-rows: repeat(auto-fit, 180px);
      overflow-y: scroll;

      .card {
        // width: 250px;
        // height: 180px;
        border-radius: 1px;
        box-sizing: border-box;
        background-color: #f8f8f8;
        padding: 7px;


        cursor: pointer;
        transition: 0.3s;
        
        .card-time, .card-bottom{
          width: 100%;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          // color: #1d1c21;
          color: #f8f8f8;

          .card-bottom-left{display: flex; align-items: center;font-size: 15px;}
        }

        .card-content {
          width: 100%;
          height: calc(100% - 50px);
          display: flex;
          align-items: center;
          justify-content: center;
          // color: #1d1c21;
          color: #f8f8f8;
          font-size: 22px;
          font-weight: bold;
        }

      }

      .card:hover{opacity: 0.9;}
      .card.hall {background-color: #21aaaa;   box-shadow: 0 0 0 5px #21aaaa;}
      .card.room {background-color: #d8922c;    box-shadow: 0 0 0 5px #d8922c;}

    }

    .order-info{
      width: 320px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      background-color: #26262a;

      .info-header {
        width: 100%;
        height: 50px;
        display: flex;  
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #f8f8f8;
        background-color: #47464b;
        padding: 0 10px;
        box-sizing: border-box;
        opacity: 0.5;
      }

      .info-extra{
        width: 100%;
        height: fit-content;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .info-extra-cell {
          width: 100%;
          height: 30px;
          font-size: 13px;
          color: #ccc;
          display: flex;
          align-items: center;

          .info-extra-item {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
          }
        }
      }

      .info-detail-title{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        background-color: #47464b;
        opacity: 0.5;

        .info-detail-name{
          flex: 2;
          height: 100%;
          display: flex;
          align-items: center;
          color: #ccc;
          font-size: 14px;
          text-indent: 25px;
        }

        .info-detail-num, .info-detail-price {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          color: #ccc;
          font-size: 14px;
        
        }
      }


      .info-detail-list{
        width: 100%;
        height: calc(100vh - 50px - 50px - 120px - 120px);
        overflow-y: scroll;

        .info-detail-cell{
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;

          .info-detail-name{
            flex: 2;
            height: 100%;
            display: flex;
            align-items: center;
            color: #f8f8f8;
            font-size: 14px;
            text-indent: 25px;
          }

          .info-detail-num, .info-detail-price {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            color: #f8f8f8;
            font-size: 14px;
            text-indent: 10px
          }
        }
        
      }

      .info-subtotal{
        width: 100%;
        height: 50px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        padding: 0 15px;

        .info-subtotal-cell {
          width: 50%;
          height: 25px;
          display: flex;
          align-items: center;
          color: #f8f8f8;
          font-size: 13px;
          text-indent: 10px;
        }
      }

      .place{
        width: 90%;
        height: 55px;
        margin: 0 auto 60px;
        padding: 5px;
        box-sizing: border-box;
      }

    }


    .page-change{
      width: 140px;
      height: 35px;
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 20px;
      right: 360px;

      .prev, .next, .num{
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        color: #f8f8f8;
        cursor: pointer;
      }
      .prev > img, .next > img {
        transition: 0.5s;
      }
      .prev > img:hover, .next > img:hover {opacity: 0.8;}
      .num:hover {
        opacity: 0.8;
      }
    }


  }

}
</style>
